import LogicFlow, {PolygonNode, PolygonNodeModel,h} from "@logicflow/core";

export default function registerConcurrent (lf:LogicFlow) {
  lf.register('concurrent', () => {
    class Node extends PolygonNode {
      getIconShape () {
        const {model} = this.props
        const {stroke} = model.getNodeStyle()
        return h(
          'svg',
          {
            x: 20,
            y: 18,
            width: 30,
            height: 30,
            viewBox: '0 0 1126 1024'
          },
          h(
            'path',
            {
              fill: stroke,
              d: 'M918.7328 90.112h-374.784c-16.7936 0-30.72 13.9264-30.72 30.72v782.336c0 16.7936 13.9264 30.72 30.72 30.72h374.784c16.7936 0 30.72-13.9264 30.72-30.72v-782.336c0-16.7936-13.9264-30.72-30.72-30.72z m-74.1376 61.44c-72.0896 84.7872-142.9504 206.848-142.9504 357.9904 0 130.2528-47.104 253.5424-126.976 336.6912V151.552h269.9264z m-210.944 720.896c81.5104-93.7984 129.024-224.8704 129.024-362.9056 0-130.6624 61.44-237.9776 124.928-314.1632V872.448h-253.952zM348.5696 146.2272c-7.7824-6.5536-19.6608-1.2288-19.6608 9.0112v47.5136H105.6768c-16.7936 0-30.72 13.9264-30.72 30.72s13.9264 30.72 30.72 30.72h223.232v47.5136c0 10.24 11.8784 15.5648 19.6608 9.0112l90.5216-78.2336c5.3248-4.9152 5.3248-13.1072 0-18.0224L348.5696 146.2272zM348.5696 420.6592c-7.7824-6.5536-19.6608-1.2288-19.6608 9.0112v47.5136H105.6768c-16.7936 0-30.72 13.9264-30.72 30.72s13.9264 30.72 30.72 30.72h223.232v47.5136c0 10.24 11.8784 15.5648 19.6608 9.0112l90.5216-78.2336c5.3248-4.9152 5.3248-13.1072 0-18.0224l-90.5216-78.2336zM348.5696 695.0912c-7.7824-6.5536-19.6608-1.2288-19.6608 9.0112v47.5136H105.6768c-16.7936 0-30.72 13.9264-30.72 30.72s13.9264 30.72 30.72 30.72h223.232v47.5136c0 10.24 11.8784 15.5648 19.6608 9.0112l90.5216-78.2336c5.3248-4.9152 5.3248-13.1072 0-18.0224l-90.5216-78.2336z'
            }
          )
        )
      }
      getShape () {
        const {model} = this.props
        const {width, height, x, y, points} = model
        const {fill, fillOpacity, strokeWidth, stroke, strokeOpacity,} = model.getNodeStyle()
        const transform = `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`
        const pointsPath = points.map((point:any[]) => point.join(',')).join(' ')
        return h(
          'g',
          {
            transform
          },
          [
            h(
              'polygon',
              {
                points: pointsPath,
                fill,
                stroke,
                strokeWidth,
                strokeOpacity,
                fillOpacity
              }
            ),
            this.getIconShape()
          ]
        )
      }
    }
    class Model extends PolygonNodeModel {
      constructor (data:any, graphModel:any) {
        data.text = {
          value: (data.text && data.text.value) || '',
          x: data.x,
          y: data.y + 50
        }
        super(data, graphModel)
        const lenght = 35
        this.points = [
          [lenght, 0],
          [lenght * 2, lenght],
          [lenght, lenght * 2],
          [0, lenght]
        ]
      }
      initNodeData(data:any) {
        super.initNodeData(data)
        const lenght = 35
        this.points = [
          [lenght, 0],
          [lenght * 2, lenght],
          [lenght, lenght * 2],
          [0, lenght]
        ]
      }
      // 自定义锚点样式
      getAnchorStyle() {
        const style = super.getAnchorStyle();
        return Object.assign({}, style, {
          stroke: 'rgb(24, 125, 255)',
          r: 3,
          hover: {
            r: 8,
            fill: 'rgb(24, 125, 255)',
            stroke: 'rgb(24, 125, 255)',
          },
        });
      }
    }
    return {
      view: Node,
      model: Model
    }
  })
}
